Skip to main content

NG CLI

There was a shift in how the Angular CLI is installed and used. Here's a breakdown:

Global Installation Requirement (Before Angular CLI v6):

  • In earlier versions of the Angular CLI (prior to version 6, released in May 2018), installing the CLI required a global installation using npm install -g @angular/cli.
  • This approach made the ng command available globally, allowing you to run it from any directory in your terminal.

Shift to npx-based Approach (Since Angular CLI v6):

  • Starting with Angular CLI v6, a more modern and efficient approach was introduced using npx. This eliminated the need for a global installation.

  • Now, you can directly use the ng command with npx as follows:

    npx @angular/cli <command>  # Example: npx @angular/cli new my-app

  • This approach offers several benefits:

    • No Global Installation: No need to clutter your system with a global installation of the Angular CLI.
    • Project-Specific Versions: Each project can use its own preferred CLI version by specifying it in the project's package.json file.
    • Dependency Management: The CLI becomes a dependency of your project, managed by your package manager (npm or yarn).

Summary Table:

Angular CLI VersionInstallation Methodng Command Usage
Before v6 (May 2018)npm install -g @angular/cli (Global)ng <command> (Available globally)
Since v6 (May 2018)npx @angular/cli <command> or local installationnpx @angular/cli <command> or ng <command> (if installed locally)

Additional Notes:

  • If you have an older project using a pre-v6 Angular CLI and still have it installed globally, you can continue using it that way. However, it's recommended to switch to the npx-based approach for new projects to take advantage of the benefits mentioned above.
  • For local CLI installation, you'd include @angular/cli as a dependency in your package.json and use npm install or yarn install to install it within your project directory. The ng command would then be available within that project's directory.

Install​

npm i -g @angular/cli

CLI COMMANDS​

ng cache clean

CLI Command to Generate Component​

ng g c <customComponent> --standalone false --skip-tests

npm run generate component events --skipImport=false

component wired to app.module.ts

ng g c pages/player --module app

Version 1

ng g c componentName --skip-tests=true --skip-import=true

Version 2

ng g c podcast --skip-tests --skip-import --dry-run